<template>
	<view class="page">

		<image class="head-image" mode="aspectFill" :src="detail.image1"></image>

		<view class="leader" @click="gotoDirector(detail.leader.nid)">
			<view class="leader-head"><u-avatar size="50" mode="aspectFill" :src="detail.leader.headimgurl"></u-avatar>
			</view>
			<view>{{detail.leader.name}}</view>
			<view style="font-size: 22rpx;">【局长】</view>
		</view>

		<view class="content">
			<view><u--text mode="price" :text="detail.price" type="error" :bold="true"></u--text></view>
			<view class="title">{{detail.theme}}</view>
			<view>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="3">
						<u--text prefixIcon="account" iconStyle="font-size: 19px" :text="'感兴趣:'+detail.interested "
							size="12"></u--text>
					</u-col>
					<u-col span="3">
						<u--text prefixIcon="eye" size="12" iconStyle="font-size: 19px"
							:text="'浏览:'+detail.view"></u--text>
					</u-col>
					<u-col span="3" v-if="isLogin">
						<view style="padding-right: 10rpx;">
							<u-button @click="gotoInvite" size="small" type="primary">趣友邀请</u-button>

						</view>

					</u-col>
					<u-col span="3" v-if="isLogin">
						<view style="padding-left: 10rpx;">
							<u-button v-if="detail.order_detail" open-type="share" size="small"
								type="success">微信邀请</u-button>
						</view>
					</u-col>


		 
				</u-row>
			</view>

			<u-cell-group :border="false">
				<u-cell :border="false" icon="clock-fill" iconStyle="font-size: 52rpx;color:#ffd91d;" title="举行时间"
					:label="detail.starttime + '-' + detail.endtime" center></u-cell>
				<u-cell :border="false" icon="account-fill" iconStyle="font-size: 52rpx;color:#ffd91d;" title="活动人数"
					:label="'总人数：'+detail.min_member+'~'+detail.sum_member+'； '+'  女生人数：' + detail.female_member + '人以上'"
					center></u-cell>
				<u-cell :border="false" icon="map-fill" iconStyle="font-size: 52rpx;color:#ffd91d;"
					:label="detail.address" center @click="openAddress">
					<view slot="title" class="u-slot-title">
						<text>活动地点</text><text style="font-size: 22rpx;color: #c8c9cc;">（点击一键导航）</text>
					</view>
				</u-cell>

				<u-cell :border="false" icon="server-man" iconStyle="font-size: 52rpx;color:#ffd91d;"
					:label="detail.provider" center>
					<view slot="title" class="u-slot-title">
						<text>活动提供方</text>
					</view>
				</u-cell>

				<u-cell :border="false" icon="server-man" iconStyle="font-size: 52rpx;color:#ffd91d;"
					:label="detail.phone" center @click="toPhone(detail.phone)">
					<view slot="title" class="u-slot-title">
						<text>联系电话</text>
					</view>
				</u-cell>


				<u-cell :border="false" icon="order" iconStyle="font-size: 52rpx;color:#ffd91d;"
					:label="detail.group_tag" center>
					<view slot="title" class="u-slot-title">
						<text>团体限定</text>
					</view>
				</u-cell>

		 
			</u-cell-group>
		</view>

		<view style="margin: 40rpx 20rpx;" v-if="detail.location">
			<map style="width: 100%; height: 500rpx;" :latitude="covers[0].latitude" :longitude="covers[0].longitude"
				:markers="covers"></map>
		</view>

		<view class="detail">
			<view class="name">活动详情</view>
			<view>
				<u-parse :content="detail.content"></u-parse>
			</view>
		</view>

		<view class="enroll">
			<view class="title">已参与趣友</view>
			<view class="list">

				<view class="item" :class="detail.member_list[index].gender == '女' ? 'female' : 'male'"
					:style="detail.member_list[index] ? '' : 'background-color: #f4f4f5;'"
					v-for="(item,index) in Number(detail.sum_member)" :key="index">
					<view v-if="detail.member_list[index]">
						<navigator hover-class="none"
							:url="'/pages/director/index?member_nid=' + detail.member_list[index].nid">
							<view style="padding-left: 12rpx;"><u-avatar
									:src="detail.member_list[index].headimgurl"></u-avatar></view>
							<view class="name">
								<u--text align="center" :block="true" lines="1" size="12"
									:text="detail.member_list[index].user_name"></u--text>
							</view>
						</navigator>
					</view>
					<view v-else>
						<view style="padding-left: 12rpx;">
							<u-avatar
								:icon="(Number(detail.female_member) - detail.join_female_member + detail.join_total_member) > index ? 'woman' : 'plus-people-fill'"
								:bg-color="(Number(detail.female_member) - detail.join_female_member + detail.join_total_member) > index ? '#fab6b6' : '#c8c9cc' "></u-avatar>
						</view>
						<view class="name">
							<u--text align="center" :block="true" lines="1" size="12" text="待报名"></u--text>
						</view>




					</view>
				</view>

				<!-- 				<view>
					<view class="item female" v-for="(item,index) in detail.member_list" v-if="item.gender == '女'"
						:key="index">
						<u-avatar :size="100" :src="item.headimgurl"></u-avatar>
						<view class="name">{{item.user_name}}</view>
					</view>
				</view> -->
			</view>
		</view>












<!-- 这里是几个按钮，报名按钮，付款按钮，填写资料按钮 -->
<!-- 未填写资料 并且 此活动是需要h5报名的，就会出现 -->

		<view class="h5_apply_button" @tap="join_by_h5"  v-if="h5_apply_info == 'unapplied'  &&  is_in_h5">
			
			<view class="button_box">
			<u-button size="large" icon="order" customStyle="background-color: #ffd91d;font-weight:bold;font-size:60rpx;height:90rpx" text="请填写报名申请"></u-button>
			</view>
			
		</view>

 
 
 <!-- 是h5报名的话，要等报名完了才能出现 -->
 
 <MxBuyButton v-if="!detail.order_detail && detail.is_over == 0 && detail.provider == '官方'  &&  is_in_group  && is_in_h5 && h5_apply_info == 'applied'"
 	class="cmp-buy-button" :total="detail.price" :coupon_price="coupon_price" @buy="buy" />
 
 
 <view v-if="!detail.order_detail && detail.is_over == 0 && detail.provider != '官方'  &&  is_in_group  && is_in_h5 && h5_apply_info == 'applied'"
 	class="joinbutton" @tap="join">
 	<u-button customStyle="background-color: #ffd91d" text="立刻报名"></u-button>
 </view>
 
 


<!-- 不是h5报名的话，就出现 -->
		<MxBuyButton v-if="!detail.order_detail && detail.is_over == 0 && detail.provider == '官方'  &&  is_in_group  && !is_in_h5"
			class="cmp-buy-button" :total="detail.price" :coupon_price="coupon_price" @buy="buy" />


		<view v-if="!detail.order_detail && detail.is_over == 0 && detail.provider != '官方'  &&  is_in_group  && !is_in_h5 "
			class="joinbutton" @tap="join">
			<u-button customStyle="background-color: #ffd91d" text="立刻报名"></u-button>
		</view>
		
		
		
		
		
		
		

	</view>
</template>

<script>
	import * as mod_detail_default from '@/pages/activity/controller/model/mod_detail_default.js'
	import MxBuyButton from '@/components/common/MxBuyButton.vue';
	import * as Config from '@/utils/config.js';
	import * as EventApi from '@/api/event.js'
	import * as UserApi from '@/api/user.js'
	import * as SettingApi from '@/api/setting.js'
	import * as groupApi from '@/api/group.js';
	import {
		wxPayment
	} from '@/utils/app'
	export default {
		components: {
			MxBuyButton
		},
		data() {
			return {
				isLogin: false,
				src: 'https://youqu.arrow.enpingshi.com/uploadfiles/logo.jpg',
				detail: {},
				id: 0,
				coupon_price: 0,
				is_in_group: "",
				is_in_h5: "",
				h5_apply_info:"",
				covers: [{
					id: 1,
					latitude: 23.127289,
					longitude: 113.115628,
					member_group_tag: [],
					width: 50,
					height: 50,
					iconPath: '/static/location.png',
					callout: {
						// color: '#007AFF', // 文本颜色
						bgColor: '#fff', // 背景色
						display: "ALWAYS", // 'BYCLICK':点击显示; 'ALWAYS':常显
						fontSize: 14,
						padding: 10, // 文本边缘留白
						borderRadius: 5,
						content: '',
					},
					urlParam: null,
					customStyle: {
						width: '100px',
					}
				}],
			}
		},
		onLoad(e) {
			this.id = e.id
			//分享进来的
			if (e.type && e.type == 'share') {
				uni.setStorageSync('share_order_param', e)
			}

			this.get_member_group_tag()
			this.get_h5_apply_info()
			//get_member(uni.getStorageSync('user_id'))

		},
		onShow() {
			console.log('返回页面触发');
			this.get_h5_apply_info()

			if (uni.getStorageSync('user_id')) {
				this.isLogin = true;
			}

			if (uni.getStorageSync('share_order_param')) {
				UserApi.get_share({
					order_id: uni.getStorageSync('share_order_param').order_id
				}).then(res => {
					uni.setStorageSync('share_order_param', '')
				})
			}

			this.getDetail()
		},
		/*分享当前页面*/
		onShareAppMessage(res) {

			if (res.from === 'button') { // 来自页面内分享按钮
				UserApi.share_event().then(res => {

				})
				return {
					title: '你的好友邀请你免费参加活动：' + this.detail.theme,
					path: '/pages/activity/detail?type=share&order_id=' +
						this.detail.order_detail.order_id +
						'&id=' + this.id +
						'&referee_id=' + uni.getStorageSync('user_id')
				};
			} else {

			}

		},
		onShareTimeline() {
			return {
				title: this.detail.theme,
				imageUrl: this.detail.image1
			}
		},
		methods: {

			openAddress() {
				// console.log("openAddress")
				// console.log(this.detail.address)
				// console.log(this.covers[0])
				// 导航地址
				// uni.openLocation({
				// 	name: this.detail.address,
				// 	address: this.detail.address,
				// 	latitude: this.covers[0].latitude,
				// 	longitude: this.covers[0].longitude 
				// })
				uni.openLocation({
					latitude: parseFloat(this.covers[0].latitude),
					longitude: parseFloat(this.covers[0].longitude),
					success: function() {
						console.log('success');
					},
					fail: function(res) {
						console.log(res);
					},
				});

			},
			buy() {

				if (this.isLogin) {
					UserApi.checkUserInfo().then(res => {
						if (res.status == 200) {
							uni.navigateTo({
								url: '/pages/activity/pay?id=' + this.id
							});

						} else if (res.status == 601) {
							uni.showModal({
								title: '提示',
								content: res.info,
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: "/pages/user/set"
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});

						}
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/index"
					})
				}
			},


			//获取当前用户信息
			get_member(usernid) {
				UserApi.UserInfo().then(res => {
					if (res.status == 200) {
						console.log("get_member 获取当前用户信息 res", res)
						this.now_member = res.data
					}
				})
			},


			//获取当前活动的客户是否有h5报名信息
			get_h5_apply_info() {
				
				console.log("h5_apply_info 获取当前用户h5信息 res") 
				
				EventApi.h5_apply_info({
					user: uni.getStorageSync('user_id'),
					event: this.id,
								}).then(res => {
					if (res.status == 200) {
						console.log("h5_apply_info 获取当前用户h5信息 res", res.info)
						this.h5_apply_info=res.info
					}
				})
				
			},

 


			//报名参加活动
			join() {

				if (this.isLogin) {
					UserApi.checkUserInfo().then(res => {
						if (res.status == 200) {
							// uni.navigateTo({
							// 	url: '/pages/activity/pay?id=' + this.id
							// });
							//传递event id sex user id  phone
							console.log("res", res)
							console.log("点击参与,应该递交参数过去")

							EventApi.join({
								user_id: uni.getStorageSync('user_id'),
								event_id: this.id,
								// sex: this.coupon_id,//性别从后端获取吧
								// phone: this.member.phone,
							}).then(res => {
								if (res.status == 200) {
									console.log("EventApi.join.res", res)
									//提示报名成功,并且删除报名按钮
									uni.$u.toast('报名成功。')
									this.detail.order_detail = 1
									this.getDetail()
								} else {
									console.log("EventApi.join.res", res)
									this.$error(res.info)
								}


							})




						} else if (res.status == 601) {
							uni.showModal({
								title: '提示',
								content: res.info,
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: "/pages/user/set"
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});

						}
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/index"
					})
				}
			},



//报名参加活动,但是需要填写资料
			join_by_h5() 
			{
				//console.log("触发了，然后这个页面，每5秒就激活一次检查活动资料，是否已经报名")
 
				// 	setInterval(
				// 	function() 
				// 			{  
				// 			EventApi.h5_apply_info
				// 			({
				// 				user: uni.getStorageSync('user_id'),
				// 				event: this.id,
				// 			}).then(res => 
				// 			{
				// 				if (res.status == 200) 
				// 				{
				// 					console.log("h5_apply_info 获取当前用户h5信息 res", res.info)
				// 					this.h5_apply_info=res.info
				// 				}
				// 			})
				// 			}, 
							
				// 			5000
				// 	);
				
				if (this.isLogin) {
					uni.navigateTo({
						url: "/pages/activity/h5apply?member="+uni.getStorageSync('user_id')+"&event="+this.id
					})
				}else{
					uni.navigateTo({
						url: "/pages/login/index"
					})
				}
 
			},
			
			
			



			gotoInvite() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/pages/invite-friends/invite-friends?event_id=' + this.detail.nid + '&leader_nid=' +
							this.detail.leader.nid
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/index"
					})
				}

			},

			gotoDirector(nid) {
				if (nid) {
					if (this.isLogin) {
						uni.navigateTo({
							url: '/pages/director/index?member_nid=' + nid
						})
					} else {
						uni.navigateTo({
							url: "/pages/login/index"
						})
					}

				}

			},


			//获取个人的标签
			get_member_group_tag() {
				console.log("获取个人的标签member_group_tag")

				uni.request({
					url: Config.baseUrl + '/api/miniapp/group/get_member_tags.php',
					data: {
						page: this.page,
						Authorization: Config.getStorageUserId(),
					},
					success: (res) => {
						console.log("成功返回", res)

						//this.member_group_tag=res.data.info
						let _tags = new Array

						res.data.info.forEach(function(item) {
							_tags.push(item.group_nid);
						});

						this.member_group_tag = _tags
						console.log("res.data.info", res.data.info)
						console.log("res", res)
						console.log("this.member_group_tag", this.member_group_tag)
					},

					fail: (res) => {
						console.log(res);
					},

				})

			},

		toPhone(number) {
				uni.makePhoneCall({
									phoneNumber:number, //要拨打的手机号
									success: (res) => {console.log("调用成功")},
									fail: (res) => {console.log('调用失败!')}
								  })
						
						},
						
						

			getDetail() {
				let that = this;
				EventApi.detail({
					id: this.id
				}).then(res => {
					that.detail = res.info

					if (that.detail.is_over == 1) {
						uni.redirectTo({
							url: '/pages/myactivity/detail?id=' + this.id
						})

						return false
					}

					if (this.detail.coupon_list && this.detail.coupon_list.length > 0) {
						let curr_coupon = this.detail.coupon_list[2];
						if (curr_coupon.is_free == "1") {
							this.coupon_price = 0
						} else {
							if (curr_coupon.coupon_type == 10) {
								this.coupon_price = this.detail.price - curr_coupon.reduce_price
								this.reduce_price = this.detail.reduce_price - this.coupon_price

							} else if (curr_coupon.coupon_type == 40) {
								this.coupon_price = curr_coupon.reduce_price
								// this.reduce_price = this.detail.price
							} else {
								this.coupon_price = this.detail.price * curr_coupon.discount
								this.reduce_price = this.detail.reduce_price - this.coupon_price
							}

						}
					} else {
						this.coupon_price = this.detail.price
					}

					that.covers[0].callout.content = that.detail.address
					that.covers[0].latitude = that.detail.location.split(",")[0]
					that.covers[0].longitude = that.detail.location.split(",")[1]

					if (this.detail.leader.nid == null) {
						this.detail.leader.headimgurl = this.src
						this.detail.leader.name = '官方'
					}



					console.log("this.detail.h5apply",this.detail.h5apply)
					if (this.detail.h5apply == 'H5报名') 
					{
						this.is_in_h5 = true
						console.log("this.is_in_group",this.is_in_h5)
					}







				//判断客户是否存符合group要求
				let group_nid = that.detail.group_nid.split(",")

				console.log("活动所属的group_nid", group_nid)
				console.log("人所属的member_group_tag ", this.member_group_tag)

				//活动没有所属的话，直接都可以报名
				if(group_nid[0]!="")
				{

				//console.log("group_nid.length", group_nid.length)

				var a = group_nid;
				var b = this.member_group_tag;
				var verdict = false;

				for (var i = 0; i < b.length; i++) {
				for (var i2 = 0; i2 < a.length; i2++) {
					if (b[i] === a[i2]) {
						verdict = true;
						break;
					}
				}
				}

				this.is_in_group = verdict


				console.log("verdict", verdict);
				console.log("this.is_in_group", this.is_in_group);
				}
				else
				{
				this.is_in_group=true;
				}





				})
			},
 
						choose_location() {
							console.log('详细地址')
							let self = this;
							uni.chooseLocation({
								success: (res) => {
									self.model1.detail = res.address;

									console.log('位置名称：' + res.name);
									console.log('详细地址：' + res.address);
									console.log('纬度：' + res.latitude);
									console.log('经度：' + res.longitude);
								},
								fail: () => {
									// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
									self.model1.detail = '详细地址'
									uni.getSetting({
										success: (res) => {
											console.log(res);
											var status = res.authSetting;
											if (!status['scope.userLocation']) {
												// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
												uni.showModal({
													title: "是否授权当前位置",
													content: "需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
													success: (tip) => {
														if (tip.confirm) {
															// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
															uni.openSetting({
																success: (
																	data
																	) => {
																	// 如果用户授权了地理信息在，则提示授权成功
																	if (data
																		.authSetting[
																			'scope.userLocation'
																		] ===
																		true
																	) {
																		uni.showToast({
																			title: "授权成功",
																			icon: "success",
																			duration: 1000
																		})
																		// 授权成功后，然后再次chooseLocation获取信息
																		uni.chooseLocation({
																			success: (
																				res
																			) => {
																				self.model1
																					.detail =
																					res
																					.address;

																				console
																					.log(
																						'位置名称：' +
																						res
																						.name
																					);
																				console
																					.log(
																						'详细地址：' +
																						res
																						.address
																					);
																				console
																					.log(
																						'纬度：' +
																						res
																						.latitude
																					);
																				console
																					.log(
																						'经度：' +
																						res
																						.longitude
																					);
																			}
																		})
																	} else {
																		uni.showToast({
																			title: "授权失败",
																			icon: "none",
																			duration: 1000
																		})
																	}
																}
															})
														}
													}
												})
											}
										},
										fail: (res) => {
											uni.showToast({
												title: "调用授权窗口失败",
												icon: "none",
												duration: 1000
											})
										}
									})
								}
							});
						},

					}
				}
</script>






<style scoped lang="scss">
	@import url("asset/detail.css");
</style>